<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4">
    <div class="results-container bg-white rounded-2xl shadow-xl overflow-hidden max-w-2xl w-full transform transition-all duration-300 hover:shadow-2xl">
        <!-- 头部区域 -->
        <div class="bg-blue-600 text-white p-6">
            <h1 class="results-title text-2xl md:text-3xl font-bold text-center mb-2">{{ question.question_text }}</h1>
            <p class="text-center text-blue-100 text-sm">投票结果统计</p>
        </div>

        <!-- 投票结果列表 -->
        <div class="p-6">
            <ul class="results-list space-y-3 mb-8">
                {% for choice in question.choice_set.all %}
                    <li class="result-item flex justify-between items-center p-4 bg-gray-50 rounded-xl hover:bg-blue-50/50 transition-all duration-300 transform hover:translate-x-1">
                        <span class="choice-text text-lg font-medium text-gray-800 flex items-center">
                            <span class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <span class="text-xs font-bold text-blue-600">{{ forloop.counter }}</span>
                            </span>
                            {{ choice.choice_text }}
                        </span>
                        <span class="vote-count text-lg font-semibold text-blue-600 flex items-center">
                            {{ choice.votes }} 
                            <span class="text-sm text-gray-500 ml-1">票</span>
                        </span>
                    </li>
                {% endfor %}
            </ul>

            <!-- 操作按钮 -->
            <div class="action-buttons flex flex-col sm:flex-row justify-center gap-4">
                <a href="{% url 'polls:index' %}" class="btn btn-home flex-1 sm:flex-none px-6 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-all duration-300 font-medium flex items-center justify-center shadow-sm hover:shadow-md">
                    <i class="fa fa-home mr-2"></i> 返回首页
                </a>
                <a href="{% url 'polls:detail' question.id %}" class="btn btn-vote flex-1 sm:flex-none px-6 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all duration-300 font-medium flex items-center justify-center shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                    <i class="fa fa-poll mr-2"></i> 返回投票
                </a>
            </div>
        </div>
    </div>
</div>
